<template>
  <a-modal
    width="80%"
    title="填写工时"
     :destroyOnClose="true"
    :visible.sync="editModalVisible"
    @cancel="handleCancleDbSync"
  >
    <template slot="footer">
      <a-button @click="handleCancleDbSync">
        关闭
      </a-button>
    </template>
    <div class="table-operator">
      <a-button type="primary" icon="plus" @click="handleAdd">新增</a-button>
    </div>
    <a-table
      size="middle"
      bordered
      :rowKey="(record, index) => index"
      :columns="columns"
      :data-source="tableSource"
      :pagination="false"
      :loading="loading"
    >
      <template slot="startTime" slot-scope="text, record">
        <a-date-picker show-time v-if="record.editable" :valueFormat="dateFormat" v-model="record.startTime"/>
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template slot="manHours" slot-scope="text, record">
        <a-input-number v-if="record.editable" v-model="record.manHours"  :max="24" :min="0" />
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template slot="remarks" slot-scope="text, record">
        <a-textarea :rows="1" v-if="record.editable" v-model="record.remarks" />
        <template v-else>
          {{ text }}
        </template>
      </template>
      <template slot="action" slot-scope="text, record">
        <span v-if="record.editable">
          <a @click="() => save(record)">保存</a>
          <a-divider type="vertical" />
          <a-popconfirm title="确定取消保存?" @confirm="() => handleCancel(record)">
            <a>取消</a>
          </a-popconfirm>
        </span>
        <span v-else>
          <a  @click="handleEdit(record)">编辑</a>
          <a-divider  type="vertical" />
          <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </template>
    </a-table>
  </a-modal>
</template>
<script>
import { getAction, postAction, putAction, deleteAction } from '@/api/manage'
export default {
  name: 'ProjectTaskTimeModal',
  data() {
    return {
      editModalVisible: false,
      loading: false,
      columns: [
        {
          title: '#',
          dataIndex: '',
          key: 'rowIndex',
          width: 40,
          align: 'center',
          customRender: function(t, r, index) {
            return parseInt(index) + 1
          }
        },
        {
          title: '开始时间',
          align: 'center',
          dataIndex: 'startTime',
          width: 120,
          scopedSlots: { customRender: 'startTime' }
        },
        {
          title: '工作时长',
          align: 'center',
          dataIndex: 'manHours',
          width: 100,
          scopedSlots: { customRender: 'manHours' }
        },
        {
          title: '工作内容',
          align: 'center',
          dataIndex: 'remarks',
          width: 100,
          scopedSlots: { customRender: 'remarks' }
        },
        {
          title: '操作',
          align: 'center',
          dataIndex: 'action',
          width: 100,
          scopedSlots: { customRender: 'action' }
        }
      ],
      dateFormat: 'YYYY-MM-DD HH:mm:ss',
      tableSource: [],
      cacheData: [],
      url: {
        list: '/pms/taskTime/list',
        add: '/pms/taskTime/add',
        edit: '/pms/taskTime/edit',
        delete: '/pms/taskTime/delete'
      },
      taskCode: ''
    }
  },
  methods: {
    handleAdd() {
      this.tableSource.push({
        editable: true,
        key: this.tableSource.length + 1
      })
    },
    handleCancleDbSync() {
      this.editModalVisible = false
    },
    loadData() {
      this.loading = true
      getAction(this.url.list, { hasQuery: true, taskCode: this.taskCode }).then(res => {
        this.loading = false
        if (res.success) {
          this.tableSource = res.result.records
          this.setDataKey()
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    show(taskCode) {
      this.taskCode = taskCode
      this.loadData()
      this.editModalVisible = true
    },
    save(record) {
      if (!record.startTime) {
        return this.$message.warning('请填写开始时间')
      }
      if (!record.manHours) {
        return this.$message.warning('请填写工作时长')
      }
      if (!record.remarks) {
        return this.$message.warning('请填写工作内容')
      }
      record.taskCode = this.taskCode
      if (!record.id) {
        postAction(this.url.add, record).then(res => {
          this.saveSuccess(res, record)
        })
      } else {
        putAction(this.url.edit, record).then(res => {
          this.saveSuccess(res, record)
        })
      }
    },
    saveSuccess(res, data) {
      if (res.success) {
        const newData = [...this.tableSource]
        const target = newData.filter(item => data.key === item.key)[0]
        if (target) {
          target.id = res.result.id
          target.editable = false
          this.tableSource = newData
        }
        this.$emit('ok')
        this.$message.success('保存成功')
      } else {
        this.$message.warning(res.message)
      }
    },
    handleCancel(record) {
      if (record.id) {
        const newData = [...this.tableSource]
        const target = newData.filter(item => record.key === item.key)[0]
        if (target) {
          Object.assign(target, this.cacheData.filter(item => record.key === item.key)[0])
          target.editable = false
          this.tableSource = newData
        }
      } else {
        this.tableSource.forEach((item, i) => {
          if (item.key === record.key) {
            this.tableSource.splice(i, 1)
            return false
          }
        })
      }
    },
    handleEdit(record) {
      const newData = [...this.tableSource]
      const target = newData.filter(item => record.key === item.key)[0]
      if (target) {
        target.editable = true
        this.tableSource = newData
      }
    },
    handleDelete(record) {
      deleteAction(this.url.delete, { id: record.id }).then(res => {
        if (res.success) {
          this.$message.success('删除成功')
          this.tableSource.forEach((item, i) => {
            if (item.key === record.key) {
              this.tableSource.splice(i, 1)
              return false
            }
          })
        }
      })
    },
    setDataKey() { // 设置行编辑状态
      this.tableSource.forEach((item, i) => {
        item.key = i + 1
        !item.editable ? item.editable = false : ''
      })
      this.cacheData = JSON.parse(JSON.stringify(this.tableSource))
    }
  }
}
</script>
<style lang="less">

</style>
